<template>
	<div class="sign_seckill" @click="showB=false">
		<div class="content">
			<div class="head">
				<h2>秒杀活动报名</h2>
				<button @click="sign">立即报名</button>
			</div>
			<div class="blank"></div>
			<div class="select_goods" :class="{sel:!show1}">
				<h3 @click.stop="show1=!show1">商品选择</h3>
				<transition name="fade">
					<div class="goods_border" v-if="show1">
						<div class="no_select_img" v-if="selGoodsData.length===0" @click="showSec">
							<img src="../../assets/images/marketAct/plusImg.png" alt="" />
							<span>添加要秒杀的商品</span>
							<p>请选择一件参与秒杀活动的商品</p>
						</div>
						<div class="have_select_img" v-if="selGoodsData.length>0" @click="showSec">
							<img :src="selGoodsData[0].face_path" alt="" />
							<div class="sec_goods_infos">
								<p>{{ selGoodsData[0].title }}</p>
								<div>
									<p>价格：</p>
									<p>{{ selGoodsData[0].price | twoDecimal }}元</p>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</div>
			<div class="seckill_types" :class="{sel:!show2}">
				<h3 @click.stop="show2=!show2">选择秒杀类型</h3>
				<transition name="fade">
					<div class="tyle_info" v-if="show2">
						<div class="selects">
							<div class="sel_infos" @click.stop="selP">
								<img :class="{rotates:showList}" src="../../assets/images/marketAct/selDown.png" alt="" />
								<p>{{ selName }}</p>
								<transition name="fade">
									<div v-if="showList" class="platform_lists">
										<div class="platform_list" :class="{sel:storeIndex===items.id}" v-for="(items,index) in typeData" :key="index" @click.stop="selStore(items.id,items.type_name,items.original_price,items.price)">{{ items.type_name }}</div>										
									</div>
								</transition>
							</div>
							<h5>你的秒杀商品将在以下平台中显示</h5>
						</div>
						<div class="goods_lists">
							<div class="goods_list" v-for="(item,index) in platData" :key="index">
								<img :src="item.face_path" alt="" />
								<h6>{{ item.platform_name }}</h6>
								<p>秒杀专场</p>
							</div>
							<div v-if="noPlatform" class="no_platform_data">该类型暂无数据</div>
						</div>
					</div>
				</transition>
			</div>
			<div class="other_setting" :class="{sel:!show3}">
				<h3 @click.stop="show3=!show3">其它设置</h3>
				<transition name="fade">
					<div class="other_info" v-if="show3">
						<h6>秒杀价格：</h6>
						<input type="text" disabled="disabled" v-model.trim="input1" placeholder="商品原价格" />
						<input type="text" @focus="cancelB" @click.stop="keyBoards" v-model.trim="input2" placeholder="秒杀价格" />
						<h6>设置秒杀库存：<span v-if="selGoodsData.length>0">（最大库存为:{{ selGoodsData[0].stock }}）</span></h6>
						<input type="number" pattern="\d*" @touchstart.stop="showB=false" v-model.trim="input3" placeholder="库存（件）" />
						<h6>秒杀排期：</h6>
						<group>
							<datetime :start-date="nowDate" title="选择日期" v-model="time1" value-text-align="left"></datetime>
						</group>
						<div class="data_infos">
							<div class="tops">
								<p>场次</p>
								<p>秒杀时间段</p>
								<p>请选择</p>
							</div>
							<div class="data_lists">
								<div class="data_list" v-for="(item,index) in periodData" :key="index">
									<p>{{ item.num_field }}</p>
									<p>{{ item.start_time }}&nbsp;~&nbsp;{{ item.end_time }}</p>
									<span v-if="+item.status===0" style="color:#e5004f;" @click="selPeriod(item)">
										<span v-if="selPeriodId!==item.id">未满</span>
										<span v-if="selPeriodId===item.id" style="color:#409EFF;">已选本场</span>
									</span>
									<span v-if="+item.status===1" style="color:#f27fa7;">名额已满</span>
									<span v-if="+item.status===2" style="color:#606266;">已过期</span>									
								</div>
								<div v-if="noPeriod" class="no_data_list">暂无本场数据</div>
							</div>
						</div>
					</div>
				</transition>
			</div>
			<div class="pay_infos">				
				<div class="origin_price">
					<p v-if="originPrice>0">原价：<span>￥{{ originPrice | twoDecimal }}</span></p>
					<p v-else>原价：</p>					
				</div>
				<div class="now_price">
					<p v-if="nowPrice>0">现价：<span>￥{{ nowPrice | twoDecimal }}</span></p>
					<p v-else>现价：</p>					
				</div>
			</div>
			<!-- 选择省市区 -->
			<!--<div class="province">
				<group title="">
					<popup-picker title="地区" popup-title="请选择" placeholder="请选择" :data="areaData" :columns="3" v-model="areaValue" show-name></popup-picker>
				</group>
			</div>-->
		</div>
		<!-- 选择秒杀商品 -->		
		<div class="select_sec_goods" v-if="showPop">						
			<popup v-model="showPop" width="100%" position="right">								
				<div class="nav_lists">
					<div class="nav_list" v-for="item in navData" :key="item.id" :class="{sel1: navIndex === item.id}" @click="selNav(item)">{{ item.cat_name }}</div>					
				</div>
				<scroller noDataText="暂无更多数据" :on-infinite="infinites" ref='myScroller' class='myScroller'>
				<div class="lists">
					<div class="list" v-for="(item,index) in gData" :key="index" @click="selSec(item)">
						<img :src="item.face_path" alt="" />
						<p>{{ item.title }}</p>
						<p>￥{{ item.price | twoDecimal }}</p>
						<img v-if="selGoodsData.length>0&&selGoodsData[0].id===item.id" class="sel_sec" src="../../assets/images/marketAct/selected.png" alt="" />
					</div>							
				</div>
				<div class="no_goods" v-if="noGoods">暂无数据</div>
				</scroller>				
			</popup>			
			<div class="sec_btns">
				<p @click="ensure">确认</p>
				<p @click="cancel">取消</p>
			</div>
		</div>		

		<!-- 模拟键盘 -->
		<transition name="fade">
			<div class="keyboards" @click.stop="showB=true" v-if="showB">
				<div class="shows" @click.stop="showB=false">
					<img src="../../assets/images/pays/down.jpg" alt="" />
				</div>
				<div class="num1" @click="num(1)">1</div>
				<div class="num2" @click="num(2)">2</div>
				<div class="num3" @click="num(3)">3</div>
				<div class="num4" @click="num(4)">4</div>
				<div class="num5" @click="num(5)">5</div>
				<div class="num6" @click="num(6)">6</div>
				<div class="num7" @click="num(7)">7</div>
				<div class="num8" @click="num(8)">8</div>
				<div class="num9" @click="num(9)">9</div>
				<div class="num10" @click="num('dot')">▪</div>
				<div class="num11" @click="num(0)">0</div>
				<div class="num12" @touchstart="gtouchstart" @touchmove="gtouchmove" @touchend="gtouchend">删除</div>
			</div>
		</transition>

		<!-- 选择支付方式 -->
		<actionsheet v-model="dialog3" :close-on-clicking-mask="false" theme="android" :menus="menus3" @on-click-menu="click3" show-cancel></actionsheet>				
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { getUrlParam } from '@/assets/js/getUrlParam'
	import { systems } from '@/assets/js/global'
	import { XHeader, Tab, TabItem, Group, Datetime, CheckIcon, Popup, PopupPicker, Actionsheet } from 'vux';
	import $ from 'jquery'
	export default {
		name: 'sign_seckill',
		data() {			
			return {
				nowDate: '',
				pgoodsData: [], //秒杀商品列表
				noPgoods: false,
				selGoodsData: [], //选中的秒杀商品数据信息											
				imgUrl: '',
				showList: false,
				storeIndex: 0,
				selName: '',
				allData: [{
					id: 1,
					catname: 'aa'
				}, {
					id: 2,
					catname: 'bb'
				}, {
					id: 3,
					catname: 'cc'
				}],
				input1: '',
				input2: '',
				input3: '',
				time1: '',
				demo1: true,
				show1: true,
				show2: true,
				show3: true,
				flag1: false,
				flag2: false,
				flag3: false,
				showPop: false,
				secIndex: -1,
				showB: false,
				timeOutEvent: 0,
				deletes: 0,
				areaData: [], //省市区数据
				areaValue: [], //选中的省市区
				typeData: [],				
				platData: [],
				noPlatform: false,
				periodData: [],
				noPeriod: false,
				selPeriodData: [],
				selPeriodId: 0,
				balances: '',
				flags: true,
				dialog3: false,									
				menus3: [	
					{
						label: '请选择支付方式：',
						type: 'disabled'
					},	
					{
						label: '支付宝支付',
						type: '2'
					},	
					{
						label: '微信支付',
						type: '3'
					},
					{
						label: '余额支付可用余额0元',
						type: '1'
					},							
				],		
				selMenu: '',			
				payParams: 0,
				dialog4: false,		
				isFinishedPay: false,	
				showCheck: '',	
				weixinURL: '',
				weixinCODE: '',
				dialog5: false,
				signStatus: 1,
				originPrice: 0,
				nowPrice: 0,
				navData: [],
				navIndex: 0,
				gData: [],	
				page3: 1,	
				pageSize3: 6,
				noGoods: false		
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Group,
			Datetime,
			CheckIcon,
			Popup,
			PopupPicker,
			Actionsheet
		},
		computed: {

		},
		watch: {
			//去掉无区的数据
			areaValue: {
				handler(val){					
					if(val.length>0){
						val.forEach((i,v)=>{
							if(i === '' || i === null){
								this.areaValue.splice(v,1);
							}
						})
					}
				},
				deep: true
			},
			input3: {
				handler(val){					
					if(this.selGoodsData.length>0&&val >= this.selGoodsData[0].stock){
						this.input3 = +this.selGoodsData[0].stock;
					}else{
						this.input3 = +this.input3;
					}
				},
				deep: true
			},
			time1: {
				handler(val){
					if(val !== ''){
						this.getPeriod();
					}
				},
				deep: true
			}
		},
		created() {								
			this.nowDate = this.format(new Date().getTime());
			//默认明天日期
			let d = new Date();
			d.setDate(d.getDate() + 1);
			this.time1 = this.format(d.getTime());
		},
		mounted() {			
			this.getType();
			//this.getCity();			
		},
		methods: {			
			//获取城市数据  供三级联动 （父子关系数据结构）
			getCity() {
				let obj = {
					userinfo: {
						token: getUrlParam('token') || '',
						uid: getUrlParam('uid') || ''
					}
				}
				this.$axiosGet('/api/store/clist', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						let arrs = res.data;
						let arr = [];
						let arr2 = [];
						let arr3 = [];
						arrs.forEach((i, v) => { //省
							let obj = {};
							obj.name = i.name;
							obj.value = '' + i.id_area;
							obj.parent = '0';
							arr.push(obj);
							i.son_data.forEach((i2, v2) => { //市
								let obj2 = {};
								obj2.name = i2.name;
								obj2.value = '' + i2.id_area;
								obj2.parent = '' + i.id_area;
								arr2.push(obj2);
								if(i2.son_son_data && i2.son_son_data.length > 0) { //有县、区
									i2.son_son_data.forEach((i3, v3) => {
										let obj3 = {};
										obj3.name = i3.name;
										obj3.value = '' + i3.id_area;
										obj3.parent = '' + i2.id_area;
										arr3.push(obj3);
									})
								} else { //无县、区
									let obj3 = {};
									obj3.name = '';
									obj3.value = '';
									obj3.parent = '' + i2.id_area;
									arr3.push(obj3);
								}
							})
						})
						this.areaData.push(...arr, ...arr2, ...arr3);
					}
				})
			},
			infinites() {  
				if (this.navIndex === 0) {
					this.getNav();
				} else {
					this.getG();                              
				}                
			},
			getNav() {
				let obj = {};
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.flag_id = 1;
				this.$axiosGet('/social-ads/adCampaign/getAppCate.json', obj, true).then(res => {
					if (res.code === 200) {
						this.navData = res.data;
						this.navIndex = res.data[0].id;											
						this.getG(); 
					}					
				});
			},
			selNav(obj) {
				this.navIndex = obj.id;
				this.page3 = 1;
				this.gData = [];
				this.infinites();
			},
			getG() {									  	
				this.noGoods = false;	
				let obj = {};
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.flag_id = 1;
				obj.cat_id = this.navIndex;
				obj.page = this.page3;
				obj.limit = this.pageSize3;
				this.$axiosGet('/social-ads/adCampaign/getProm.json', obj, true).then(res => {
					if (res.code === 200) {						
						if (res.data.length === 0) {  
							this.noGoods = true;							                         
							this.$refs.myScroller.finishInfinite(2);   							                      
                            return;														
						}						
						this.gData = this.gData.concat(res.data); 						
						let arr = [];
						for(let val of this.gData){
							arr.push(val.id)
						}
						let newArr = [];
						let newArr2 = [];
						for(let i =0;i<arr.length;i++){
							if(newArr.indexOf(arr[i]) == -1){
								newArr.push(arr[i]);
								newArr2.push(this.gData[i]);
							}
						}
						this.gData = newArr2;						 						
						if(res.data.length < this.pageSize3 || JSON.stringify(res.data) === '{}') {													
							this.$refs.myScroller.finishInfinite(2);
							return;
							if(res.data.length === 0 || JSON.stringify(res.data) === '{}') {								
								return;
                            }                            
						} else {
							this.page3++;
							this.$refs.myScroller.finishInfinite();
                        }  
					} else if (res.code === 404) {
						this.noGoods = true; 
						this.gData = [];
						this.$refs.myScroller.finishInfinite(2);												
						return;						
					}					
				});
			},
			//阻止默认键盘弹出
			cancelB() {
				document.activeElement.blur();
			},			
			getType(){
				let obj = {
					userinfo: {
						token: getUrlParam('token') || '',
						uid: getUrlParam('uid') || ''
					}
				};
				this.$axiosGet('/api/miaosha/getType', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.typeData = res.data;
						this.storeIndex = res.data[0].id;
						this.selName = res.data[0].type_name;
						this.originPrice = res.data[0].original_price;
						this.nowPrice = res.data[0].price;
						let obj2 = {};
						obj2.userinfo = {
							uid: getCookie('UID'),
							token: getCookie('TOKEN')
						};
						this.getPlatform(this.storeIndex);												
					}
				})
			},
			getPlatform(id){
				this.$vux.loading.show();
				this.platData = [];
				this.noPlatform = false;				
				let obj = {};
				obj.userinfo = {
					token: getUrlParam('token') || '',
					uid: getUrlParam('uid') || ''
				};
				obj.id = id;
				this.$axiosGet('/api/miaosha/getPlatform', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.platData = res.data;
						if(this.balances === ''){
							this.getBalance();
						}else{
							this.$vux.loading.hide();
						}
					} else if(res.code === 404) {
						this.noPlatform = true;
						if(this.balances === ''){
							this.getBalance();
						}else{
							this.$vux.loading.hide();
						}						
					}
				})
			},
			getBalance() {
				let obj = {};
				obj.userinfo = {
					token: getUrlParam('token') || '',
					uid: getUrlParam('uid') || ''
				};
				this.$axiosPost('/api/miaosha/balance', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.balances = +res.data;						
						this.$vux.loading.hide();
					}
				})
			},
			getPeriod(){
				this.periodData = [];
				this.noPeriod = false;
				let obj = {};
				obj.userinfo = {
					token: getUrlParam('token') || '',
					uid: getUrlParam('uid') || ''
				};
				obj.seckill_date = this.time1;
				this.$axiosGet('/api/miaosha/getChangci', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.periodData = res.data;
					} else if(res.code === 404) {
						this.noPeriod = true;
					}
				})
			},
			selPeriod(obj) {
				this.selPeriodData = [];
				this.selPeriodId = 0;
				this.selPeriodData.push(obj);
				this.selPeriodId = obj.id;
			},
			selP() {
				this.showList = !this.showList;
			},
			selStore(id, name, oPrice, price) {
				this.storeIndex = id;
				this.selName = name;
				this.originPrice = oPrice;
				this.nowPrice = price;
				this.showList = false;
				this.getPlatform(id);
			},			
			showSec() {
				this.showPop = true;
			},
			selSec(arr) {
				this.selGoodsData = [];
				this.selGoodsData.push(arr);
				this.input1 = this.selGoodsData[0].price;
				this.showPop = false;
			},
			ensure() {
				this.showPop = false;
			},
			cancel() {				
				this.showPop = false;
			},
			keyBoards() {
				this.showB = true;
			},
			num(id) {
				if(id === 'dot') {
					if(this.input2.length === 0) {
						return
					}
					this.input2 += '.';
				} else if(id === 'del') {
					this.input2 = this.input2.slice(0, this.input2.length - 1);
				} else if(id === 0) {
					if(+this.input2 !== 0) {
						this.input2 += id;
					}
				} else {
					this.input2 += id;
				}
			},
			/* --------长按事件start------- */
			gtouchstart() {
				this.timeOutEvent = setTimeout(() => {
					this.longPress()
				}, 500); //这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
				return false;
			},
			gtouchmove() {
				clearTimeout(this.timeOutEvent); //清除定时器   
				this.timeOutEvent = 0;
			},
			gtouchend() {
				clearTimeout(this.timeOutEvent); //清除定时器   
				clearInterval(this.deletes);
				if(this.timeOutEvent != 0) {
					this.input2 = this.input2.slice(0, this.input2.length - 1);
					//这里写要执行的内容（尤如onclick事件）   
					//alert("你这是点击，不是长按");
				}
				return false;
			},
			longPress() {
				this.timeOutEvent = 0;
				//执行长按要执行的内容，如弹出菜单   
				//alert("长按事件触发发");
				this.deletes = setInterval(() => {
					this.input2 = this.input2.slice(0, this.input2.length - 1)
				}, 200);
			},
			/* --------------长按事件end--------- */
			format(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},
			//立即报名
			sign(){				
				if(this.selGoodsData.length === 0){
					this.$vux.alert.show({
						title: '提示',
						content: '请选择秒杀商品'
					})
					return;
				}
				if(this.input2.length === 0){
					this.$vux.alert.show({
						title: '提示',
						content: '请输入秒杀价格'
					})
					return;
				}
				if(this.input3 == 0){
					this.$vux.alert.show({
						title: '提示',
						content: '请输入秒杀库存'
					})
					return;
				}
				if(this.selPeriodData.length === 0){
					this.$vux.alert.show({
						title: '提示',
						content: '请选择秒杀场次'
					})
					return;
				}
				if(!this.demo1){
					this.$vux.alert.show({
						title: '提示',
						content: '请使用余额支付'
					})
					return;
				}
				if(!this.flags) {
					return;
				}
				let obj = {};
				let self = this;
				obj.userinfo = {
					token: getUrlParam('token') || '',
					uid: getUrlParam('uid') || ''
				};
				obj.goods_id = this.selGoodsData[0].id;
				obj.itype_id = this.storeIndex;
				obj.platform_id_arr = [];
				this.platData.forEach((i, v) => {
					obj.platform_id_arr.push(i.store_id);
				})
				if(obj.platform_id_arr.length === 0) {					
					this.$vux.alert.show({
						title: '提示',
						content: '该秒杀类型暂无商品，请重新选择'
					})
					return;
				}
				obj.original_price = this.input1;
				obj.sale_price = this.input2;
				obj.stock = this.input3;
				obj.start_time = this.time1 + ' ' + this.selPeriodData[0].start_time;
				obj.end_time = this.time1 + ' ' + this.selPeriodData[0].end_time;
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.face_path = this.selGoodsData[0].face_path;
				obj.title = this.selGoodsData[0].title;							
				obj.source_from = 2; //来源  1-app 2-微信 3-网页
				obj.changci_id = this.selPeriodId;				
				this.$axiosPost('/api/miaosha/applySeckill', {
					data: JSON.stringify(obj)
				}).then(res => {
					if (res.code === 200) {						
						this.payParams = res.id;												
						//this.dialog3 = true;
						setTimeout(() => {
							this.$vux.confirm.show({
								title: '是否支付成功',
								content: '提示',						
								onCancel () {
									self.$payOrder('Wechat',this.payParams,'platform.miaosha').then(res2 => {
										self.showCheck = setInterval(() => {
											self.checkStatus(res2.id);
										}, 3000);
									})
								},
								onConfirm () {
									self.$payOrder('Wechat',this.payParams,'platform.miaosha').then(res2 => {
										self.showCheck = setInterval(() => {
											self.checkStatus(res2.id);
										}, 3000);
									})
								}
							})
						}, 2000);					
					} else if (res.code === 201) {						
						this.$vux.alert.show({
							title: '提示',
							content: res.msg
						});
					}
				})
			},
			click3(key,item) {				
				this.selMenu = key;	
				let type = '';
				let self = this;
				if (item.type === '2') {
					type = 'Alipay';
				}else if (item.type === '3') {
					type = 'Wechat';
				}else if (item.type === '1') {
					type = 'balance';
				}													
				this.$payOrder(type,this.payParams,'platform.miaosha').then(res => {					
					if (res.code === 200) {	
						this.signStatus = 2;																									
						if (item.type === '2') { //支付宝							
							//-----------------window.open(res.data); //用这个浏览器会拦截，改为表单提交---------------
							this.dialog3 = this.dialog5 = false;
							this.dialog4 = true;
							let form1 = document.getElementById('form1');
							form1.setAttribute('action', res.data);							
							form1.submit();																																																						
						}else if (item.type === '3') { //微信
							let obj = {};						
							obj.code = res.data.code;	
							obj.url = res.data.url;
							this.weixinURL = res.data.url;
							this.weixinCODE = res.data.code;
							this.dialog3 = false;
							this.dialog4 = false;
							this.dialog5 = true;																																
						}else if (item.type === '1') { //余额

						}
						self.showCheck = setInterval(() => {
							self.checkStatus(res.id);
						}, 3000);
					}										
				});		
			},
			//轮询活动付款状态
			checkStatus(ids) {				
				let obj = {};
				let self = this;				
				obj.uid = getUrlParam('uid') || '';
				obj.token = getUrlParam('token') || '';	
				obj.id = ids;			
				this.$axiosGet('/payment/pays/checkpaystatus.json', obj, true).then( res => {										
					//data.code  支付状态0未支付,1支付成功，-1已退款，-2已取消	
					if (res.code === 200) {
						if (res.data.code === 1) { //完成支付							
							clearInterval(this.showCheck);
							this.$router.push('/signSeckill');										
						} else if (res.data.code === 1) {
							this.isFinishedPay = false;							
						}
					}
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">	
	.sign_seckill {
		min-height: 100%;
		background: #fff;
		padding-bottom: 2rem;
		.content {
			.head {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 1.7rem;
				display: flex;
				justify-content: space-between;
				padding: .66rem .3rem 0 .3rem;
				border-bottom: .16rem solid #f2f2f2;
				background: #fff;
				z-index: 99;
				h2 {
					font-size: .4rem;
					color: #000;
				}
				button {
					width: 1.98rem;
					height: .74rem;
					line-height: .74rem;
					background: #fff;
					border: 1px solid #2f96e3;
					border-radius: .06rem;
					font-size: .3rem;
					color: #2f96e3;
				}
			}
			.blank {
				height: 1.7rem;
			}
			.select_goods {
				border-bottom: .16rem solid #f2f2f2;
				padding: .28rem .43rem .21rem .43rem;
				>h3 {
					font-size: .31rem;
					color: #000;
					font-weight: 400;
					text-align: left;
				}
				.goods_border {
					height: 1.84rem;
					border: 1px dashed #000;
					border-radius: .06rem;
					margin-top: .23rem;
					.no_select_img {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-top: .2rem;
						img {
							width: .52rem;
							height: .52rem;
						}
						span {
							font-size: .26rem;
							color: #4b92d4;
							margin: .12rem 0;
						}
						p {
							font-size: .26rem;
							color: #3b3b3b;
						}
					}
					.have_select_img {
						display: flex;
						justify-content: space-between;
						padding: 0 .25rem 0 .12rem;
						margin-top: .08rem;
						img {
							height: 1.62rem;
						}
						.sec_goods_infos {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							>p {
								font-size: .22rem;
								color: #111;
							}
							>div {
								p {
									font-size: .22rem;
									color: #111;
									text-align: right;
								}
							}
						}
					}
				}
			}
			.seckill_types {
				border-bottom: .16rem solid #f2f2f2;
				padding: .38rem .16rem .28rem .16rem;
				>h3 {
					font-size: .31rem;
					color: #000;
					font-weight: 400;
					text-align: left;
				}
				.selects {
					display: flex;
					justify-content: space-between;
					margin: .38rem 0;
					>h5 {
						font-size: .32rem;
						color: #9e9e9e;
						font-weight: 400;
					}
					.sel_infos {
						display: flex;
						align-items: center;
						padding: 0 .12rem;
						width: 2rem;
						height: .54rem;
						background: #f3f3f3;
						border-radius: .05rem;
						position: relative;
						img {
							width: .2rem;
							height: .1rem;
							margin-right: .1rem;
						}
						.rotates {
							transform: rotate(180deg);
						}
						p {
							font-size: .28rem;
							color: #1a1a1a;
						}
						.platform_lists {
							position: absolute;
							top: .65rem;
							left: 0rem;
							width: 100%;
							text-align: left;
							border: 1px solid #d1d1d1;
							background: #fff;
							z-index: 99;
							.platform_list {
								font-size: .28rem;
								color: #1a1a1a;
								white-space: nowrap;
								padding: .15rem .4rem;
							}
							.sel {
								background: #f3f3f3;
								color: red;
							}
						}
					}
				}
				.goods_lists {
					/* 横向滚动 */
					display: -webkit-box;
					overflow-x: scroll;
					-webkit-overflow-scrolling: touch;
					&::-webkit-scrollbar {						
						width: 100px;
						height: 2px;
					}
					&::-webkit-scrollbar-thumb {
						background: #808080;
					}
					.goods_list {
						width: 1.28rem;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-left: .15rem;
						padding-bottom: .2rem;
						img {
							width: 1.28rem;
							height: 1.28rem;
						}
						h6 {
							height: .74rem;
							font-size: .27rem;
							color: #000;
							font-weight: 400;
							margin: .08rem 0;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						p {
							font-size: .19rem;
							color: #959595;
						}
					}
					.no_platform_data{
						width: 100%;
						height: 3.04rem;
						line-height: 3.04rem;
						text-align: center;
					}
				}
			}
			.other_setting {
				border-bottom: .16rem solid #f2f2f2;
				padding: .42rem .24rem .3rem .24rem;
				h3 {
					font-size: .31rem;
					color: #000;
					font-weight: 400;
					text-align: left;
				}
				h6 {
					font-size: .26rem;
					color: #a7a7a7;
					font-weight: 400;
					text-align: left;
					margin-top: .38rem;
				}
				input {
					border: none;
					width: 100%;
					height: .68rem;
					background: #f3f3f3;
					font-size: .26rem;
					color: #333;
					padding: 0 .28rem;
					margin-top: .33rem;
					&::placeholder {
						font-size: .26rem;
						color: #a0a0a0;
					}
				}
				.data_infos {
					.tops {
						width: 6.86rem;
						margin: .3rem auto 0 auto;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #d2d2d2;
						padding: 0 .48rem .13rem .42rem;
						p {
							font-size: .26rem;
							color: #a5a5a5;
						}
					}
					.data_lists {
						.data_list {
							width: 6.86rem;
							height: .8rem;
							line-height: .8rem;
							margin: 0 auto;
							padding: 0 .26rem;
							border-bottom: 1px solid #d3d3d3;
							display: flex;
							justify-content: space-between;
							background: #fff;
							p {
								font-size: .28rem;
								color: #000;
							}
							>span {
								width: 1.2rem;
								font-size: .28rem;
								color: #2693e6;
								white-space: nowrap;
							}
						}
						.full {
							background: #f9e2e8;
							border-bottom: none;
							span {
								color: #898788;
							}
						}
						.selected {
							background: #3097e6;
							border-bottom: none;
							span {
								color: #fff;
							}
						}
						.no_data_list{
							margin-top: .26rem;
							color: #a2a2a2;
						}
					}
				}
			}
			.pay_infos {				
				padding: .4rem .44rem 0 .33rem;
				>h6 {
					font-size: .3rem;
					color: #000;
					font-weight: 400;
				}
				.origin_price {
					display: flex;
					justify-content: flex-end;
					margin-top: .2rem;					
					p {
						font-size: .32rem;
						color: #000;						
						span {
							text-decoration: line-through;
						}
					}
				}
				.now_price {
					display: flex;
					justify-content: flex-end;
					margin-top: .1rem;
					p {
						font-size: .32rem;
						color: #000;						
						span {
							color: #ff110f;
						}
					}
					p:nth-of-type(2) {
						color: #a2a2a2;
					}
				}
			}
			.sel {
				border-bottom: 1px solid #f2f2f2;
			}
		}
		.select_sec_goods {
			text-align: left;						
			.nav_lists{
				position: fixed;
				left: 0;
				top: -.05rem;								
				display: flex;
				background: #fff;
				z-index: 99;
				white-space: nowrap;
				overflow-x: auto;
				width: 100%;
				padding: .1rem;
				-webkit-overflow-scrolling: touch;
				&::-webkit-scrollbar {						
					width: 100px;
					height: 2px;
				}
				&::-webkit-scrollbar-thumb {
					background: #808080;
				}
				.nav_list{					
					padding: .1rem;					
					position: relative;	
					margin-right: .1rem;				
				}
				.sel1{
					color: #f00;
					&:after{
						content: '';
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 1px;
						background: #f00;
						transform-origin: 0 0;
						transform: scaleY(.5);
					} 
				}
			}
			.lists {
				display: flex;
				flex-wrap: wrap;				
				padding: .8rem 0 1.4rem 0;
				.list {					
					width: 50%;					
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					position: relative;										
					margin: .34rem 0 0 0;
					img {
						width: 3.2rem;
					}
					p:nth-of-type(1) {
						font-size: .26rem;
						color: #170f1c;
						margin-top: .1rem;
						width: 90%;
						height: .65rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					p:nth-of-type(2) {
						width: 90%;
						font-size: .26rem;
						color: #c70617;						
						font-weight: 600;
						text-align: left;						
					}
					.sel_sec {
						width: .3rem;
						height: .3rem;
						position: absolute;
						right: .3rem;
						top: .3rem;
					}
				}				
			}
			.no_goods{
				position: fixed;
				left: 50%;				
				transform: translate(-50%, -50%);
				font-size: .34rem;
				color: #808080;
			}
		}
		.sec_btns {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 7.5rem;
			height: .88rem;
			background: #fff;
			z-index: 999;
			display: flex;
			align-items: center;						
			border-top: 1px solid #f0f0f0;
			p {
				width: 50%;
				height: .48rem;
				font-size: .32rem;
				text-align: center;
			}
			p:nth-of-type(1) {
				color: #429dd2;
			}
			p:nth-of-type(2) {
				color: #8a8a8a;
				border-left: 1px solid #8a8a8a;
			}
		}
		.keyboards {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #cfd6dc;
			z-index: 99;
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 .07rem 0;
			.shows {
				width: 100%;
				height: .64rem;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 .07rem;
				border-top: 1px solid #dadada;
				img {
					width: .61rem;
				}
			}
			div[class^="num"] {
				width: 32%;
				height: 1rem;
				line-height: 1rem;
				background: #fff;
				border-radius: .08rem;
				position: relative;
				margin: .07rem 0 0 .07rem;
				&::after {
					content: "";
					box-sizing: border-box;
					position: absolute;
					left: 0;
					top: 0;
					width: 200%;
					height: 200%;
					z-index: 100;
					transform: scale(0.5, 0.5);
					transform-origin: 0 0;
					border: 1px solid #D1D1D1;
				}
				&:active {
					background: #D1D1D1;
				}
			}
		}
	}
</style>